<template>
    <div class="register f14">
        <HeadBg></HeadBg>
        <div class="box">
            <div class="item phone">
                <img src="@/assets/login/phone.png">
                <input type="tel" placeholder="手机号码" maxlength="11" v-model.trim="phone">
                <div class="get-code f12" @click="sendCode">获取验证码</div>
            </div>
            <div class="item code">
                <img src="@/assets/login/code.png">
                <input type="text" placeholder="验证码" v-model.trim="code">
            </div>
            <div class="item password">
                <img src="@/assets/login/password.png">
                <input type="password" placeholder="密码" v-model.trim="password">
            </div>
            <div class="item password" v-if="isForget">
                <img src="@/assets/login/password.png">
                <input type="password" placeholder="确认密码" v-model.trim="password2">
            </div>
            <div @click="registerHanle">
                <MyButton :title="isForget ? '修改' : '注册'"></MyButton>
            </div>
        </div>
        <div class="agree">
            <input type="checkbox" v-model="agree">
            <div class="detail">
                <span>同意</span>
                <span class="red f12">《挺想租用户协议》</span>
            </div>
        </div>

    </div>
</template>
<script>
import HeadBg from '@/components/Login/HeadBg.vue'
import Button from '@/components/Login/Button.vue'
export default {
    name: "RegisterView",
    components: {
        MyButton: Button,
        HeadBg,
    },
    data() {
        return {
            phone: "",
            password: "",
            password2: "",
            code: "",
            agree: false,
            isForget: false,
        }
    },
    mounted() {
        const { forget } = this.$route.query;
        if (Number(forget)) this.isForget = true;
    },
    methods: {
        registerHanle() {
            if (!this.checkPhone()) return;
            if (!this.code) return this.$toast("请输入验证码");
            if (!this.password) return this.$toast("请输入密码");
            if (this.isForget) {
                if (this.password !== this.password2)
                    return this.$toast("两次密码不一致");
            }
            if (!this.agree) return this.$toast("未同意用户协议");
            const data = {
                "mobile": this.phone,
                "code": this.code,
                "pwd": this.password,
            }
            const path = this.isForget ? "Auth/forgetPwd" : "Auth/grantAuth"
            this.$sendPost(path, data)
                .then(res => {
                    this.$toast(res.data.msg);
                    if (res.data.status === 200)
                        this.$router.push({ name: "login" })
                })
        },
        checkPhone(status = true) {
            const phoneReg = /^1[3-9][0-9]{9}$/
            const flag = phoneReg.test(this.phone);
            if (this.phone.length < 11 || !flag) {
                this.$toast("手机号错误");
                status = false;
            }
            return status;
        },
        sendCode() {
            if (!this.checkPhone()) return;
            this.$sendPost("Auth/sendCode", { "mobile": this.phone })
                .then(res => {
                    this.$toast(res.data.msg);
                })
        },
    }
}
</script>
<style lang="scss" scoped>
.register {
    width: 100vw;
    min-height: 100vh;

    .box {
        width: 250px;
        display: flex;
        flex-direction: column;
        margin: 70px auto 0;

        .item {
            display: flex;
            background-color: #f7f7f7;
            height: 50px;
            border-radius: 5px;
            position: relative;

            &:nth-of-type(1) {
                .get-code {
                    right: 0;
                    position: absolute;
                    height: 100%;
                    line-height: 50px;
                    color: white;
                    border-radius: 10px;
                    padding: 0 10px;
                    background-color: #e3041f;
                }
            }

            img {
                object-fit: contain;
                margin: 0 20px;
            }

            input {
                flex-basis: 70%;
                height: 100%;
                outline: 0;
                border: 0;
                background-color: transparent;
            }
        }

        .phone {
            margin-bottom: 20px;

            img {
                width: 15px;
            }
        }

        .code,
        .password {
            margin-bottom: 20px;

            img {
                width: 20px;
            }
        }

        .code {
            height: 50px;
            line-height: 50px;
            text-align: right;
        }
    }

    .agree {
        width: 250px;
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 70px auto 0;
        justify-content: center;

        input {
            width: 15px;
            height: 15px;
            margin-right: 10px;
        }

        .detail {
            .red {
                color: #e40114;
            }
        }
    }
}
</style>